<html>
<head>
<meta charset="UTF-8">
<title>销售开单</title>
<link id="easyuiTheme" rel="stylesheet" type="text/css"
	href="jslib/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="jslib/easyui/themes/icon.css" />
<script type="text/javascript" src="jslib/easyui/jquery.min.js"></script>
<script type="text/javascript" src="jslib/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="jslib/easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
</head>
<body>
	<!-- 开头 -->
	<form id="submitform" method="post">
		<center><a href="#" class="easyui-linkbutton" iconCls="icon-add"
			onClick="clearData()">清空数据，重新开单</a></center>
			<hr>
		<table>
			<tr>
				<td>金额总计:</td>
				<td><input id="total" name="total" type="text" value="0"
					readonly></input></td>
				<td>支付:</td>
				<td><input class="easyui-validatebox" id="pay" name="pay"
					type="text" required="true" onblur="count()"></input></td>
				<td>找零:</td>
				<td><input id="return" name="return" type="text" value="0"
					readonly></input></td>
			</tr>
			<tr>
				<td><select name="key">
						<option value="customerPhone">电话号码</option>
						<option value="customerNO">客户编号</option>
						<option value="customerEmail">电子邮箱</option>
				</select></td>
				<td><input class="easyui-validatebox" type="text" name="phone" id="phone"
					required="true" value="111" /></td>
				<td></td>
				<td><a href="#" class="easyui-linkbutton" iconCls="icon-add"
					onClick="saveChanges()">提交订单</a></td>
			</tr>
		</table>
	</form>
	<!-- 结束 -->

	<table id="tt" style="width: auto; height: auto" title="商品购物清单"
		iconCls="icon-edit" singleSelect="true" idField="productId" url=""
		class="easyui-datagrid" toolbar="#tb">
		<thead>
			<tr>
				<th field="productId" width="80">商品ID</th>
				<th field="code" width="180">商品条形码</th>
				<th field="name" width="180">商品名称</th>
				<th field="description" width="180">商品描述</th>
				<th field="price" width="80" align="right"
					editor="{type:'numberbox',options:{precision:1}}">衣服价格</th>
				<th field="amount" width="80" align="right"
					editor="{type:'numberbox',options:{precision:0}}">衣服数量</th>
				<th field="unitcost" width="80" align="right"
					editor="{type:'numberbox',options:{precision:1}}">总价格</th>
			</tr>
		</thead>
	</table>
	<div id="tb">
		<br>
		<form id="form" action="productLoadByCodeAction" method="post">
			<label for="email">商品条形码:</label> <input class="easyui-validatebox"
				name="code" id="code" required="true" value="1" /> <label
				for="subject">数量:</label> <input class="easyui-validatebox"
				type="text" id="amount"  name="amount" required="true" value="1" /> <a href="#"
				class="easyui-linkbutton" iconCls="icon-add" plain="true"
				onclick="addProduct()">添加</a> <a href="#" class="easyui-linkbutton"
				iconCls="icon-remove" plain="true" onclick="removeProduct()">删除选中行
			</a>
		</form>
		<hr>
		<center><label>订单编号:</label> <input type="text" id="orderNumber" value="无订单" readOnly></center>
	</div>
</body>
<script type="text/javascript">
	var lastIndex;
	$('#tt').datagrid({
		onClickRow : function(rowIndex) {
			if (lastIndex != rowIndex) {
				$('#tt').datagrid('endEdit', lastIndex);
				$('#tt').datagrid('beginEdit', rowIndex);
			}
			lastIndex = rowIndex;
			setEditing(rowIndex);
			total();
		}
	});

	//默认运算-行值
	function setEditing(rowIndex) {
		var objGrid = $("#tt");
		var price = objGrid.datagrid('getEditor', {
			index : rowIndex,
			field : 'price'
		});
		var amount = objGrid.datagrid('getEditor', {
			index : rowIndex,
			field : 'amount'
		});
		var unitcost = objGrid.datagrid('getEditor', {
			index : rowIndex,
			field : 'unitcost'
		});
		price.target.bind('change', function() {
			$.messager.alert("操作提示", "=costcost", "info");
			calculate();
		});
		amount.target.bind('change', function() {
			calculate();
		});
		calculate();
		function calculate() {
			var priceVal = $(price.target).val();
			var amountVal = $(amount.target).val();
			var cost = priceVal * amountVal;
			$(unitcost.target).numberbox('setValue', cost);
		}
	}
	function total() {
		var rows = $("#tt").datagrid('getRows');
		var total = 0;
		for (var i = 0; i < rows.length; i++) {
			total = parseFloat(total * 1 + rows[i]['unitcost'] * 1).toFixed(1);
		}
		//$.messager.alert("操作提示", total + "=costcost", "info");
		document.getElementById('total').value = total;
	}
	//增加一行产品列表
	function addProduct() {
		var url = 'productLoadByCodeAction';
		$('#form').form('submit', {
			url : url,
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(data) {
				data = eval('(' + data + ')');
				$.messager.show({
					title : '提示:',
					msg : data.msg,
					showType : 'show'
				});
				if (data.success) {
					$('#tt').datagrid('insertRow', {
						index : 0,
						row : data.obj
					});
					$('#tt').datagrid('beginEdit', 0);//打开编辑模式
					setEditing(0);//调用计算函数，自动赋值
					$('#tt').datagrid('endEdit', 0);//关闭编辑模式
					total();
				}
			}
		});
	}
	//删除一行产品列表
	function removeProduct() {
		var row = $('#tt').datagrid('getSelected');
		//如果没有选中记录
		if (row == null) {
			$.messager.show({
				title : '提示:',
				msg : "请选择一条记录",
				showType : 'show'
			});
			return;
		}
		var index = $('#tt').datagrid('getRowIndex', row);
		$('#tt').datagrid('deleteRow', index);
		$.messager.show({
			title : '提示:',
			msg : "删除成功",
			showType : 'show'
		});
	}

	//获得编辑后的数据,并提交到后台
	function saveChanges() {
		var url = 'CustomerIsExitAction';
		$('#submitform').form('submit', {
			url : url,
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(data) {
				data = eval('(' + data + ')');
				$.messager.show({
					title : '提示:',
					msg : data.msg,
					showType : 'show'
				});
				if (data.success) {
					var rows = $("#tt").datagrid('getData');
					var data = {
						data : JSON.stringify(rows)
					};//JSON.stringify(json)把json转化成字符串
					$.post("SaleOrderAddAction", data, function(data) {
						data = eval('(' + data + ')');
						$.messager.show({
							title : '提示:',
							msg : data.msg,
							showType : 'show'
						});
						if (data.success) {
							document.getElementById('orderNumber').value =data.obj;
						}
					});
				}
			}
		});
	}
	//找零设置
	function count() {
		var total = document.getElementById('total').value;
		var pay = document.getElementById('pay').value;
		var cash = parseFloat(pay * 1 - total * 1).toFixed(1);
		if (cash < 0) {
			alert("金额不足！")
		} else {
			document.getElementById('return').value = cash;
		}
	}
	//清空数据输入
	function clearData() {
		$('#tt').datagrid('loadData', {
			total : 0,
			rows : []
		});
		document.getElementById('total').value = 0;
		document.getElementById('pay').value = "";
		document.getElementById('return').value = 0;
		document.getElementById('amount').value = 1;
		document.getElementById('code').value = "";
		document.getElementById('phone').value = "0000";
		document.getElementById('orderNumber').value ="无订单";
	}
</script>
</html>